<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>订单管理系统</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    <style>
        .app-container {
            display: flex;
            height: 100vh;
        }

        .app-aside {
            background: #2d3a4b;
            padding: 0;
            height: 100vh;
            color: white;
        }

        .app-header {
            background: #409EFF;
            color: white;
            text-align: center;
            line-height: 60px;
            height: 60px;
        }

        .app-main {
            padding: 20px;
            overflow: auto;
        }

        .form-dialog {
            width: 600px;
        }

        .form-action {
            text-align: right;
        }

        .book-image {
            width: 50px;
            height: 50px;
            cursor: pointer;
            margin-right: 10px;
        }

        .book-card {
            display: flex;
            padding: 10px;
            border: 1px solid #dcdfe6;
            margin: 10px 0;
        }

        .book-card img {
            width: 100px;
            height: 150px;
            margin-right: 10px;
        }

        .chart-container {
            width: 100%;
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;
        }

        .chart {
            width: 45%;
            height: 300px;
        }
    </style>
</head>
<body>
<div id="app" class="app-container">
    <el-aside width="200px" class="app-aside">
        <el-menu class="app-menu" :default-openeds="['1']">
            <el-submenu index="1">
                <template slot="title">
                    <i class="el-icon-menu"></i>
                    <span>菜单</span>
                </template>
                <el-menu-item index="1-1" @click="navigateTo('后台需求3.html')">
                    <i class="el-icon-s-data"></i>仪表盘
                </el-menu-item>
                <el-menu-item index="1-2" @click="navigateTo('user.html')">
                    <i class="el-icon-user"></i>用户管理
                </el-menu-item>
                <el-menu-item index="1-3" @click="navigateTo('settings.html')">
                    <i class="el-icon-setting"></i>设置
                </el-menu-item>
                <el-menu-item index="1-4" @click="navigateTo('wenda1.html')">
                    <i class="el-icon-question"></i>问答管理
                </el-menu-item>
                <el-menu-item index="1-5" @click="navigateTo('公告1.html')">
                    <i class="el-icon-message"></i>公告管理
                </el-menu-item>
                <el-menu-item index="1-6" @click="navigateTo('购物车.html')">
                    <i class="el-icon-shopping-cart-full"></i>购物车管理
                </el-menu-item>
                <el-menu-item index="1-7" @click="navigateTo('order.html')">
                    <i class="el-icon-document"></i>订单管理
                </el-menu-item>
            </el-submenu>
        </el-menu>
    </el-aside>

    <el-container>
        <el-header class="app-header">订单管理</el-header>
        <el-main class="app-main">
            <el-input placeholder="请输入用户名" v-model="search" class="input-with-select">
                <el-button slot="append" icon="el-icon-search" @click="handleSearch">搜索</el-button>
            </el-input>

            <el-button type="primary" @click="dialogVisible = true" style="margin: 20px 0;">新增订单</el-button>

            <!-- 图表区域 -->
            <div class="chart-container">
                <div class="chart" id="ordersChart"></div>
                <div class="chart" id="totalSalesChart"></div>
            </div>

            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>订单列表</span>
                </div>
                <el-table :data="filteredOrders" style="width: 100%;" stripe border>
                    <el-table-column prop="id" label="订单编号" width="120"></el-table-column>
                    <el-table-column prop="username" label="用户名"></el-table-column>
                    <el-table-column prop="bookid" label="图书编号"></el-table-column>
                    <el-table-column prop="num" label="订购数量"></el-table-column>
                    <el-table-column prop="totalprice" label="订单总价"></el-table-column>
                    <el-table-column prop="time" label="下单时间" width="180"></el-table-column>
                    <el-table-column label="图书图片" width="100">
                        <template slot-scope="scope">
                            <img :src="scope.row.book.image" class="book-image" @click="handleViewBook(scope.row.book)">
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="150">
                        <template slot-scope="scope">
                            <el-button type="primary" icon="el-icon-edit" size="mini" @click="handleEdit(scope.row)">编辑</el-button>
                            <el-button type="danger" icon="el-icon-delete" size="mini" @click="handleDelete(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-card>

        </el-main>
    </el-container>

    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" class="form-dialog">
        <el-form ref="orderForm" :model="orderForm" label-width="100px">
            <el-form-item label="用户名">
                <el-input v-model="orderForm.username"></el-input>
            </el-form-item>
            <el-form-item label="图书编号">
                <el-input v-model="orderForm.bookid"></el-input>
            </el-form-item>
            <el-form-item label="订购数量">
                <el-input type="number" v-model="orderForm.num"></el-input>
            </el-form-item>
            <el-form-item label="订单总价">
                <el-input type="number" v-model="orderForm.totalprice"></el-input>
            </el-form-item>
            <el-form-item label="下单时间">
                <el-input v-model="orderForm.time" disabled></el-input>
            </el-form-item>
            <el-form-item class="form-action">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="handleSave">保存</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>

    <!-- 大图书信息展示 -->
    <el-dialog :visible.sync="bookDetailDialogVisible" width="500px">
        <template #title>
            <span>{{ bookDetail.bookname }}</span>
        </template>
        <div class="book-card">
            <img :src="bookDetail.image" />
            <div>
                <p><strong>图书编号：</strong>{{ bookDetail.bookid }}</p>
                <p><strong>图书名：</strong>{{ bookDetail.bookname }}</p>
                <p><strong>单价：</strong>{{ bookDetail.price }}</p>
                <p><strong>库存：</strong>{{ bookDetail.num }}</p>
                <p><strong>简介：</strong>{{ bookDetail.jianjie }}</p>
                <p><strong>出版社：</strong>{{ bookDetail.cbs }}</p>
                <p><strong>作者：</strong>{{ bookDetail.author }}</p>
            </div>
        </div>
    </el-dialog>
</div>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                search: '',
                dialogVisible: false,
                bookDetailDialogVisible: false,
                dialogTitle: '新增订单',
                orderForm: {
                    id: '',
                    username: '',
                    bookid: '',
                    num: '',
                    totalprice: '',
                    time: new Date().toLocaleString(),
                    book: {}
                },
                bookDetail: {},
                orders: [
                    {
                        id: 1,
                        username: 'zhangsan',
                        bookid: 'B001',
                        num: 2,
                        totalprice: 200,
                        time: '2024-07-01 14:24',
                        book: {
                            image: 'https://via.placeholder.com/100x150?text=Book1',
                            bookname: '图书一',
                            price: 100,
                            num: 10,
                            jianjie: '这是图书一的简介',
                            cbs: '出版社一',
                            author: '作者一'
                        }
                    },
                    {
                        id: 2,
                        username: 'lisi',
                        bookid: 'B002',
                        num: 1,
                        totalprice: 100,
                        time: '2024-07-05 15:10',
                        book: {
                            image: 'https://via.placeholder.com/100x150?text=Book2',
                            bookname: '图书二',
                            price: 100,
                            num: 5,
                            jianjie: '这是图书二的简介',
                            cbs: '出版社二',
                            author: '作者二'
                        }
                    },
                    {
                        id: 3,
                        username: 'wangwu',
                        bookid: 'B003',
                        num: 3,
                        totalprice: 300,
                        time: '2024-07-20 09:15',
                        book: {
                            image: 'https://via.placeholder.com/100x150?text=Book3',
                            bookname: '图书三',
                            price: 100,
                            num: 2,
                            jianjie: '这是图书三的简介',
                            cbs: '出版社三',
                            author: '作者三'
                        }
                    },
                    {
                        id: 4,
                        username: 'lisi',
                        bookid: 'B001',
                        num: 2,
                        totalprice: 200,
                        time: '2024-07-25 11:00',
                        book: {
                            image: 'https://via.placeholder.com/100x150?text=Book1',
                            bookname: '图书一',
                            price: 100,
                            num: 10,
                            jianjie: '这是图书一的简介',
                            cbs: '出版社一',
                            author: '作者一'
                        }
                    },
                    {
                        id: 5,
                        username: 'zhangsan',
                        bookid: 'B002',
                        num: 1,
                        totalprice: 100,
                        time: '2024-07-28 12:30',
                        book: {
                            image: 'https://via.placeholder.com/100x150?text=Book2',
                            bookname: '图书二',
                            price: 100,
                            num: 5,
                            jianjie: '这是图书二的简介',
                            cbs: '出版社二',
                            author: '作者二'
                        }
                    },
                    {
                        id: 6,
                        username: 'zhangsan',
                        bookid: 'B002',
                        num: 1,
                        totalprice: 100,
                        time: '2024-07-28 12:30',
                        book: {
                            image: 'https://via.placeholder.com/100x150?text=Book2',
                            bookname: '图书二',
                            price: 100,
                            num: 5,
                            jianjie: '这是图书二的简介',
                            cbs: '出版社二',
                            author: '作者二'
                        }
                    }
                ],
                ordersChart: null,
                totalSalesChart: null
            }
        },
        computed: {
            filteredOrders() {
                if (this.search) {
                    return this.orders.filter(order =>
                        order.username.includes(this.search) || order.bookid.includes(this.search)
                    );
                }
                return this.orders;
            }
        },
        methods: {
            navigateTo(page) {
                window.location.href = page;
            },
            handleSearch() {},
            handleEdit(row) {
                this.dialogTitle = '编辑订单';
                this.orderForm = { ...row };
                this.dialogVisible = true;
            },
            handleSave() {
                if (this.orderForm.id) {
                    const index = this.orders.findIndex(order => order.id === this.orderForm.id);
                    if (index !== -1) {
                        this.orders.splice(index, 1, { ...this.orderForm });
                    }
                } else {
                    const id = this.orders.length ? this.orders[this.orders.length - 1].id + 1 : 1;
                    const newOrder = {
                        id,
                        ...this.orderForm,
                        time: new Date().toLocaleString(),
                        book: {
                            image: 'https://via.placeholder.com/100x150?text=' + this.orderForm.bookid,
                            bookname: '书名' + this.orderForm.bookid,
                            price: 100,
                            num: 10,
                            jianjie: '这是图书' + this.orderForm.bookid + '的简介',
                            cbs: '出版社',
                            author: '作者'
                        }
                    };
                    this.orders.push(newOrder);
                }
                this.dialogVisible = false;
                this.updateCharts(); // 更新图表
            },
            handleDelete(row) {
                this.$confirm('此操作将永久删除该订单, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    const index = this.orders.findIndex(order => order.id === row.id);
                    if (index !== -1) {
                        this.orders.splice(index, 1);
                    }
                    this.$message.success('删除成功!');
                    this.updateCharts(); // 更新图表
                }).catch(() => {});
            },
            handleViewBook(book) {
                this.bookDetail = book;
                this.bookDetailDialogVisible = true;
            },
            getDateString(date) {
                return date.toISOString().split('T')[0]; // YYYY-MM-DD 格式
            },
            generateChartData() {
                const dateLabels = [];
                const orderCounts = [];
                const totalSales = [];
                const today = new Date();
                const daysInPast30 = Array.from({ length: 30 }).map((_, i) => {
                    const d = new Date(today.getFullYear(), today.getMonth(), today.getDate() - i);
                    return this.getDateString(d);
                }).reverse();

                daysInPast30.forEach(date => {
                    const filteredOrders = this.orders.filter(order => order.time.startsWith(date));
                    orderCounts.push(filteredOrders.length);
                    totalSales.push(filteredOrders.reduce((sum, order) => sum + order.totalprice, 0));
                    dateLabels.push(date);
                });

                return {
                    labels: dateLabels,
                    orderCounts,
                    totalSales,
                };
            },
            updateCharts() {
                const { labels, orderCounts, totalSales } = this.generateChartData();
                this.renderOrdersChart(labels, orderCounts);
                this.renderTotalSalesChart(labels, totalSales);
            },
            renderOrdersChart(labels, data) {
                const chartDom = document.getElementById('ordersChart');
                if (this.ordersChart) {
                    this.ordersChart.dispose();
                }
                this.ordersChart = echarts.init(chartDom);
                const option = {
                    title: {
                        text: '订单数量'
                    },
                    tooltip: {},
                    xAxis: {
                        type: 'category',
                        data: labels
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        name: '订单数量',
                        type: 'line',
                        data: data
                    }]
                };
                this.ordersChart.setOption(option);
            },
            renderTotalSalesChart(labels, data) {
                const chartDom = document.getElementById('totalSalesChart');
                if (this.totalSalesChart) {
                    this.totalSalesChart.dispose();
                }
                this.totalSalesChart = echarts.init(chartDom);
                const option = {
                    title: {
                        text: '交易总额'
                    },
                    tooltip: {},
                    xAxis: {
                        type: 'category',
                        data: labels
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        name: '交易总额',
                        type: 'bar',
                        data: data
                    }]
                };
                this.totalSalesChart.setOption(option);
            }
        },
        mounted() {
            this.updateCharts(); // 初始化图表
        }
    });
</script>
</body>
</html>
